<div class="component-outer">
  <div class="component">
    <i class="tag-name" style="margin-right: 10px;" [textContent]="'<ng-progress'"></i>

    <span class="input-wrapper">
      <span class="input-name">direction</span> =
      <i class="input">
        <select name="direction" [(ngModel)]="options.direction">
          @for (d of directions; track d) {
            <option [ngValue]="d">{{ d }}</option>
          }
        </select>
      </i>
    </span>

    <span class="input-wrapper">
      <span class="input-name">speed</span> = <i class="input"><input name="speed" [(ngModel)]="options.speed"></i>
    </span>

    <span class="input-wrapper">
      <span class="input-name">trickleSpeed</span> = <i class="input"><input name="trickleSpeed"
                                                                             [(ngModel)]="options.trickleSpeed"></i>
    </span>

    <span class="input-wrapper">
      <span class="input-name">fadeOutSpeed</span> = <i class="input"><input name="fadeOutSpeed"
                                                                             [(ngModel)]="options.fadeOutSpeed"></i>
    </span>

    <span class="input-wrapper">
      <span class="input-name">debounceTime</span> = <i class="input"><input name="debounceTime"
                                                                             [(ngModel)]="options.debounceTime"></i>
    </span>

    <span class="input-wrapper">
        <span class="input-name">flat</span> = <i class="input">
          <input name="flat" type="checkbox" [(ngModel)]="options.flat">
          <span>{{ options.flat }}</span>
        </i>
      </span>

    <span class="input-wrapper">
      <span class="input-name">spinner</span> = <i class="input">
        <input name="showSpinner" type="checkbox" [(ngModel)]="options.spinner">
        <span>{{ options.spinner }}</span>
      </i>
    </span>

    <span class="input-wrapper">
      <span class="input-name">spinnerPosition</span> = <i class="input">
        <select name="spinnerPosition" [(ngModel)]="options.spinnerPosition">
          @for (p of spinnerPosition; track p) {
            <option [ngValue]="p">{{ p }}</option>
          }
        </select>
      </i>
    </span>

    <span class="input-wrapper">
      <span class="input-name">relative</span> = <i class="input">
        <input name="relative" type="checkbox" [(ngModel)]="options.relative">
        <span>{{ options.relative }}</span>
      </i>
    </span>

    <span class="input-wrapper">
      <span class="input-name">min</span> = <i class="input"><input type="number" name="min" min="0" max="99"
                                                                    [(ngModel)]="options.min"></i>
    </span>

    <span class="input-wrapper">
      <span class="input-name">max</span> = <i class="input"><input type="number" name="max" min="1" max="100"
                                                                    [(ngModel)]="options.max"></i>
    </span>

    <span class="output-wrapper">
      <span class="output-name">started</span> = <i class="output">onStarted()</i>
    </span>

    <span class="output-wrapper">
      <span class="output-name">completed</span> = <i class="output">onCompleted()</i>
    </span>

    <i class="tag-name" [textContent]="' />'"></i>
  </div>
</div>
